import React from 'react';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import styles from './Login.css';

const FormItem = Form.Item;

class Login extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    console.log(this.state);
    console.log(this.props)
    const { getFieldDecorator } = this.props.form;
    // console.log(getFieldDecorator)
    return (
      <div className={styles.loginInput}>
        <Form onSubmit={this.handleSubmit} className={styles.loginForm}>
          <FormItem>
            {getFieldDecorator('username', {
              rules: [{required: true, message: '请输入用户名！'}]
            })(
              <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder='请输入用户名'/>
            )}
          </FormItem>
          <FormItem>
            {getFieldDecorator('password', {
              rules: [{required: true, message: '请输入密码！'}]
            })(
              <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type='password' placeholder='请输入密码'/>
            )}
          </FormItem>
          <FormItem>
            {getFieldDecorator('remember', {
              valuePropName: 'check', initialValue: true
            })(
              <Checkbox>记住密码</Checkbox>
            )}
            <Button type="primary" htmlType="submit" className={styles.loginFormButton}>
              登录
            </Button>
          </FormItem>
        </Form>
      </div>
    )
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }
}

const WrappedLogin = Form.create()(Login);

export default WrappedLogin;

